<template>
  <div id="app">
	 
	 
	 <div class="item menu"> 

			<ul>
				<li><router-link to="/user">用户管理</router-link> </li>
				<li><router-link to="/role">角色管理</router-link> </li>
				<li><router-link to="/menu">菜单管理</router-link> </li>
				<li><router-link to="/news">新闻管理</router-link> </li>
			</ul>
			
			<div class="btn" >	<el-button type="primary" size="mini" @click="changeUrl('/user')">用户管理</el-button></div>
			
			<div class="btn"><el-button type="primary" size="mini" @click="changeUrl('/role')">角色管理</el-button></div>
			<div class="btn"><el-button type="primary" size="mini" @click="changeUrl('/menu')">菜单管理</el-button></div>
			<div class="btn"><el-button type="primary" size="mini" @click="changeUrl('/news')">新闻管理</el-button></div>
		
	  
	  </div>
	 <div class="item content">
		 
		 <!-- 
		 
		   官方插件   Vue-Router  需要安装	
		   {   path:'/user',component:User }
		   {   path:'/role',component:Role }
		   {   path:'/menu',component:Menu }
		 router-view 根据路由url  path:'/?' 动态映射关系中找具体的组件 -->
		 <router-view></router-view>
		 
		 
	 </div>
	
	 
  </div>
</template>

<script>

 
	

export default {
  name: 'App',
  data(){
	  return {
		  selected:2
	  }
  },
  methods:{
	  changeUrl(url){
		  
		  // window.location = "http://localhost/#/role"
		  //console.log(this.$router)
		  // 编程式的路由
		// this.$router.push({ path: url });// 记录跳转的轨迹  允许前进和后退
		this.$router.replace({ path: url }) ;// 不记录历史 

		  
		  
		  
		  
	  }
  }

 }
</script>

<style scoped>
  #app{
	  margin: 10px;
  }
  .item{
	  vertical-align: top;
	  display: inline-block;
	  height: 100vh;
	  border:dashed 1px grey;
  }
  
  .menu{
	  width: 200px;
  }
  
  .content{
	  width: 1000px;
  }
  
  .btn{
	  margin:10px 0 10px  20px
  }

</style>
